<template>
  <div>
 <div style="margin: 10px 0;">
   <el-button type="primary" @click="dialogFormVisible=true">新增</el-button>
 </div>
  <el-table
    :data="model.list"
    style="width: 100%">
    <el-table-column
      prop="title"
      label="名称"
      width="180">
    </el-table-column>
    <el-table-column
      label="图标"
      width="180">
      <template slot-scope="scope">
        <el-image
          style="width: 50px; height: 50px"
          :src="scope.row.icon"
          ></el-image>
      </template>
    </el-table-column>

    <el-table-column
      prop="path"
      label="路径"
      width="180">
    </el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--    弹窗-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form :model="modeinfo" ref="modeinfo" label-width="80px">
      <el-form-item label="名称" prop="title"><el-input v-model="modeinfo.title" placeholder="输入名称" class="w300"></el-input></el-form-item>
      <el-form-item label="路径" prop="path"><el-input v-model="modeinfo.path" placeholder="输入路径" class="w300"></el-input></el-form-item>
      <el-form-item label="类型" prop="title">
        <el-select v-model="modeinfo.type" placeholder="选择类型">
          <el-option :label="type" :value="parseInt(index)" :key="index" v-for="(type,index) in model.typeList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图标">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :data="data"
        >
          <img v-if="modeinfo.icon" :src="modeinfo.icon" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="editModel">提交</el-button>
        <el-button type="info" @click="resetForm">取消</el-button>
      </el-form-item>
    </el-form>
    </el-dialog>
<!--    弹窗-->

  </div>
</template>

<script>
  import {mapState,mapActions} from "vuex"
  import {editModel} from "@/apilist/Personnel";

  export default {
        name: "manageModel",
        data(){
            return {
                dialogFormVisible: false,
                modeinfo: {
                    id: 0,
                    icon: '',
                    path: '',
                    type: 0,
                    title: '',
                },
                title:'模块',
                uploadUrl: this.fun.APP_VUE_UPLOAD_URL,
                data: {dir: 'model'},
            }
        },
        computed: {
            ...mapState("Common",["model"]),
        },
        methods: {
            ...mapActions("Common",["getModelListActions"]),

            handleEdit(index,row){
                this.modeinfo.id = row.id
                this.modeinfo.icon = row.icon
                this.modeinfo.path = row.path
                this.modeinfo.type = row.type
                this.modeinfo.title = row.title
                this.title = row.title
                this.dialogFormVisible = true

            },
            handleAvatarSuccess(res,file){
               this.modeinfo.icon = res.data.fileUrl
            },
            editModel(){
                editModel(this.modeinfo).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                        onClose: ()=>{
                            this.resetForm();
                            this.getModelListActions();
                        }
                    })
                })
            },
            resetForm(){
                this.title = '';
                this.modeinfo.id = 0
                this.modeinfo.icon = ''
                this.modeinfo.path = ''
                this.modeinfo.title = ''
                this.modeinfo.type = 0
                this.dialogFormVisible = false
            },
        },
    }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
